<template>
    <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
        :disabled="disabled"
    >
        <div id="mine">
            <!-- 头部 -->
            <div class="user-info">
                <div class="pl-8 pr-16 dis-flex flex-x-between flex-y-center">
                    <img
                        class="avatar"
                        :src="userInfo.wechatAvatarUrl"
                        alt=""
                        @click="goUserInfo"
                    />
                    <div class="flex-box">
                        <div class="name omit">
                            <!-- {{ userInfo.wechatNickName }} -->
                            徐银行
                        </div>
                        <div>
                            <!-- 未实名 -->
                            <img
                                src="@/assets/img/Authenticated.png"
                                class="unnamed"
                                alt=""
                                @click="goRealName"
                            />
                            <!-- 已实名 -->
                            <img
                                src="@/assets/img/Authenticated.png"
                                class="normal"
                                alt=""
                                v-if="userInfo.realNameState == 1"
                                @click="alRealname"
                            />
                            <!-- 普通用户 -->
                            <img
                                src="@/assets/img/commander.png"
                                class="normal"
                                alt=""
                                v-if="!isVip"
                            />
                            <!-- 团长 -->
                            <img
                                src="@/assets/img/commander.png"
                                class="normal"
                                alt=""
                                v-else
                            />
                        </div>
                    </div>
                </div>
                <!-- 普通用户 -->
                <div class="vip" @click="openVip">
                    <p>团长可享3大特权 免费升级</p>
                </div>
            </div>

            <!-- 身体 -->
            <div class="other-info">
                <!-- 统计 -->
                <div class="money-box dis-flex flex-x-between prl-12">
                    <div
                        v-for="(item, index) in achievementList"
                        :key="item.id"
                        class="dis-flex flex-dir-column flex-y-center"
                        @click="jumpPage(item, index)"
                    >
                        <p class="fs-20 fw-700 col-0B mb-11 font">
                            {{ item.num ? item.num : 0 }}
                        </p>
                        <p class="fs-12 fw-400 col-6">{{ item.name }}</p>
                    </div>
                </div>

                <div class="card">
                    <div
                        v-for="(item, index) in serviceList"
                        :key="index"
                        class="item dis-flex flex-x-between flex-y-center"
                        @click="goPage(item)"
                    >
                        <div class="left">
                            <img :src="item.icon" alt="" />
                            <span>{{ item.name }}</span>
                        </div>
                        <van-icon
                            name="arrow"
                            color="#979797"
                            size="0.4267rem"
                        />
                    </div>
                </div>

                <!-- 我的客服 -->
                <div class="my-service" @click="goService">
                    <img src="../../../assets/img/shou.png" alt="" />
                    <span>我的客服</span>
                    <van-icon name="arrow" color="#979797" size="0.4267rem" />
                </div>
            </div>

            <div style="height:60px"></div>
        </div>
    </van-pull-refresh>
</template>

<script>
    import { Toast } from 'vant'
    export default {
        props: [], // 父辈向子辈传参
        name: 'mine',
        data() {
            return {
                achievementList: [
                    {
                        id: 1,
                        num: 0,
                        name: '钱包余额',
                        link: '/wallet',
                    },
                    {
                        id: 2,
                        num: 0,
                        name: '总计收益',
                        link: '/wallet',
                    },
                    {
                        id: 3,
                        num: 0,
                        name: '拼团用户',
                        link: '/buyvip',
                    },
                ],
                serviceList: [
                    {
                        id: 1,
                        icon: require("../../../assets/img/Account_Manager.png"),
                        name: '实名认证',
                        link: ''
                    },
                    {
                        id: 2,
                        icon: require("../../../assets/img/wallet.png"),
                        name: '收款账户',
                        link: '/wallet'
                    },
                    {
                        id: 3,
                        icon: require("../../../assets/img/complain.png"),
                        name: '申请机器',
                        link: ''
                    },
                    {
                        id: 5,
                        icon: require("../../../assets/img/set_up.png"),
                        name: '设置中心',
                        link: '/setting'
                    },
                ],
                equipmentList: [],
                bindPopup: false,
                isVip: false,
                defaultEquipmentInfo: {},
                baseInfo: {},
                userInfo: {},
                loading: true,
                isLoading: true,
                signRewardsAmount: 0,
                show: false,
                disabled: false,
                returnSummary: {}
            }
        },
        methods: {
            closeBind() {
                this.bindPopup = false
                this.disabled = false
            },
            getEquipmentList() {
                this.bindPopup = true
                this.disabled = true
                this.$api.app.getEquipmentListApi().then((res) => {
                    console.log("列表结果", res);
                    this.equipmentList = res.data
                    this.loading = false
                }).catch((err) => {
                    Toast(err.message)
                    console.log("err", err);
                });
            },
            changeEqument(item, index) {
                console.log("切换", item, index);
                if (item.defaultState == 1) {
                    Toast('当前设备已是默认设备')
                    return
                }
                Toast.loading('切换中')
                this.$api.app.changeEquipmentApi({
                    machineId: item.id
                }).then(async (res) => {
                    // console.log("res", res);
                    let obj = { ...item }
                    obj.defaultState = 1
                    // console.log("obj", obj);
                    this.$store.commit('setDefaultEquipment', obj)
                    this.defaultEquipmentInfo[index] = obj
                    this.getDefaultInfo()
                    this.getUserInfo()
                }).catch((err) => {
                    Toast(err.message)
                });
            },
            bindNew() {
                this.$router.push('/newbind')
            },
            goRealName() {
                let url = window.location.origin + '/#/realname'
                this.$api.accredit.getRemitCodeApi({
                    encryptUrl: encodeURIComponent(url)
                }).then((res) => {
                    console.log("获取重定向结果", res);
                    this.$store.commit('setRealMark', 1)
                    window.location.href = res.data
                }).catch((err) => {
                    console.log("获取重定向报错", err);
                });
                // this.$router.push('/realname')
            },
            alRealname() {
                this.$router.push('/certifityRes')
            },
            openVip() {
                this.$router.push('/buyvip')
            },
            goUserInfo() {
                this.$router.push('/userinfo')
            },
            closePopup() {
                // 获取当前金额
                this.updateInfo()
                this.getSignList()
                this.show = false
            },

            getSignStatus() {
                let data = this.$store.state.app.signMark
                console.log("签名标识", data);
                if (data == false) {
                    this.getSignList()
                } else {
                    this.isSign = data == 1 ? true : false
                }
            },
            goPage(item, index) {
                if (item.link) {
                    this.$router.push(item.link)
                }
            },
            goService(){
                this.$router.push('/myServicer')
            },
            jumpPage(item, index) {
                if (item.id == 3) {
                    if (this.returnSummary.rewardSwitch == 1) {
                        // 开启
                        if (this.isVip) {
                            // this.$toast('待开发')
                        } else {
                            this.$router.push(item.link)
                        }
                    }
                    return
                }
                if (item.link) {
                    this.$router.push(item.link)
                }
            },
            getDefaultInfo() {
                let data = this.$store.state.app.defaultEquipment
                let site = this.$store.state.app.baseInfo
                this.defaultEquipmentInfo = data
                this.baseInfo = site
                this.isVip = data.equityState == 1 ? true : false
                this.bindPopup = false
                this.disabled = false
                this.getSummary()
                Toast.clear()
            },
            updateInfo() {
                this.$api.app.walletStatisticsApi().then((res) => {
                    console.log("用户基本信息", res);
                    this.userInfo = res.data
                    this.achievementList[0].num = res.data.currentBalance
                    this.achievementList[1].num = res.data.totalBackAmount
                    this.$store.commit('setUserInfo', res.data)
                }).catch((err) => {
                    Toast(err.message)
                });
            },
            getUserInfo() {
                this.$store.commit('setRealMark', 0)
                this.$api.app.walletStatisticsApi().then((res) => {
                    console.log("用户基本信息", res);
                    this.userInfo = res.data
                    this.$store.commit('setUserInfo', res.data)
                    this.achievementList[0].num = res.data.currentBalance
                    this.achievementList[1].num = res.data.totalBackAmount
                }).catch((err) => {
                    Toast(err.message)
                });
            },
            onRefresh() {
                this.$api.app.walletStatisticsApi().then((res) => {
                    console.log("用户基本信息", res);
                    // Toast('刷新成功');
                    this.isLoading = false;
                    this.userInfo = res.data
                    this.achievementList[0].num = res.data.currentBalance
                    this.achievementList[1].num = res.data.totalBackAmount
                    this.$store.commit('setUserInfo', res.data)
                }).catch((err) => {
                    this.isLoading = false;
                    Toast(err.message)
                });
                this.getSummary()
            },
            getSummary() {
                let data = this.$store.state.app.defaultEquipment
                this.$api.app.returnSummaryApi({
                    machinePrimaryId: data.id
                }).then((res) => {
                    console.log("获取统计结果", res);
                    this.achievementList[2].num = res.data.returnedAmount
                    this.returnSummary = res.data
                }).catch((err) => {
                    console.log("err", err);
                    this.$toast(err.message)
                });
            }
        },
        computed: {},
        watch: {
            "$store.state.user.userInfo.realNameState": {
                handler: function (newVal, oldVal) {
                    // console.log('实名', '新:' + newVal, '旧:' + oldVal);
                    this.userInfo.realNameState = newVal
                },
                deep: true
            },
        },
        mounted() {
            // 获取默认设备
            this.getDefaultInfo()
            this.getUserInfo()

            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    console.log("1111");
                    window.location.reload()
                }
            })
        },
    }
</script>
    
<style scoped lang='scss'>
    #mine {
        min-height: calc(100vh - 50px);
    }
    .van-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }
    .user-info {
        background: url("/src/assets/img/My_background.png");
        background-size: 100% 100%;
        width: 375px;
        height: 371px;
        font-size: 0;
        padding: 24px 16px 0;
        box-sizing: border-box;
        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 16px;
        }
        .name {
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            line-height: 16px;
            margin-bottom: 8px;
        }
        .omit {
            display: flex;
            // 超出一行省略号
            overflow: hidden;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            margin-right: 6px;
        }
        .normal {
            width: 45px;
            height: 16px;
        }
        .unnamed {
            width: 49px;
            height: 16px;
        }
        .vip {
            font-style: 12px;
            font-weight: 400;
            font-size: 12px;
            color: #854d28;
            line-height: 12px;
            margin-top: 24px;
            background: url("/src/assets/img/Member_has_been_activated.png");
            background-size: 100% 100%;
            width: 344px;
            height: 80px;
            position: relative;
            & > p {
                position: absolute;
                bottom: 16px;
                left: 16px;
            }
        }
        .purchased {
            background: url("/src/assets/img/Member_has_been_activated.png");
            background-size: 100% 100%;
        }
    }

    .other-info {
        .font {
            font-family: "D-DIN";
        }
        background: url("/src/assets/img/My_occlusion.svg");
        background-size: 100% 100%;
        width: 375px;
        height: 416px;
        box-sizing: border-box;
        padding: 45px 16px ;
        margin-top: -218px;
        position: relative;
        z-index: 1;
        .money-box {
            margin-top: -15px;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            padding: 30px 24px 24px;
        }

        .card {
            width: 345px;
            background: #ffffff;
            border-radius: 10px;
            margin: 12px auto 0;
            padding: 16px 16px 6px;
            box-sizing: border-box;
            .left {
                font-weight: 400;
                font-size: 16px;
                color: #121836;
                line-height: 16px;
                display: flex;
                align-items: center;
                padding: 12px 0;
                & > img {
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                }
            }
        }
    }

    .my-service {
        width: 127px;
        height: 32px;
        background: #ffffff;
        border-radius: 16px 16px 16px 16px;
        font-weight: 400;
        font-size: 14px;
        color: #3d3d3d;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px auto 0 auto;
        & > img {
            width: 20px;
            height: 20px;
            margin: 0 3px;
        }
    }
</style>